<template>
  <div class="ColumnList">
    <div class="ColumnList-title">
      <span v-if="columnName">{{ columnName }}</span>
      <span v-else>列表</span>
    </div>
    <div class="ColumnList-content" v-if="columnContent.length != 0">
      <template v-for="(item, index) in columnContent">
        <div class="ColumnList-content-box">
          <div class="left">
            <!-- <img @click="imgClick" src="../../../assets/banner-1.jpg" /> -->
            <img :src="item.picUrl" @click="updateColumnClick(index)" />
          </div>
          <div class="right">
            <!-- <div class="title">内容标题内容标题内容标题内容标题内容标题内容标题内容标题内容标题</div> -->
            <div class="title">{{ item.elementName }}</div>

            <div class="content">
              <!-- <span>讲师姓名</span>
              <span>讲师职位</span> -->
              <span>{{ item.lecturerCompany }}</span>
              <span>{{ item.lecturerName }}</span>
            </div>
            <div class="label">
              <!-- <span>标签</span> -->
              <span>{{ item.studentCount }}</span>
            </div>
          </div>
        </div>
      </template>

      <div class="ColumnList-content-box">
        <div class="left">
          <div class="null-div" @click="updateColumnClick">
            <img src="../../../assets/qxbNull.png" />
            <p>
              <span>+</span>
              <span v-if="columnName">{{ columnName }}</span>
              <span v-else>列表</span>
            </p>
          </div>
        </div>
        <div class="right">
          <div class="title">内容标题内容标题内容标题内容标题内容标题内容标题内容标题内容标题</div>
          <div class="content">
            <span>讲师姓名</span>
            <span>讲师职位</span>
          </div>
          <div class="label">
            <span>标签</span>
          </div>
      </div>
    </div>
    </div>

    <!-- 栏目为空时，显示默认占位盒 -->
    <div class="ColumnList-content-null" v-else>
      <div class="ColumnList-content-box">
        <div class="left">
          <div class="null-div" @click="updateColumnClick">
            <img src="../../../assets/qxbNull.png" />
            <p>
              <span>+</span>
              <span v-if="columnName">{{ columnName }}</span>
              <span v-else>列表</span>
            </p>
          </div>
        </div>
        <div class="right">
          <div class="title">内容标题内容标题内容标题内容标题内容标题内容标题内容标题内容标题</div>
          <div class="content">
            <span>讲师姓名</span>
            <span>讲师职位</span>
          </div>
          <div class="label">
            <span>标签</span>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script type="ts">
import {computed, defineComponent,reactive} from "vue";

export default defineComponent({
  // props: ['updateColumn'],
  props: ['attrData','updateColumn'],

  setup (props) {
    const columnName = computed(() => {
      return props.attrData.columnName;
    })

    const columnContent = computed(() => {
      return props.attrData.columnContent || [];
    })
    const updateColumnClick = (index) => {
      console.log(columnContent, index, columnContent.value[index], 'columnContent123')
      const item = columnContent.value[index]
      props.updateColumn({
        "columnName": columnName.value,
        ...item
      })
    }


    return {
      columnName,
      columnContent,
      updateColumnClick,

    }
  }
});
</script>

<style lang="scss" scoped>
.ColumnList {
  width: 100%;
  max-width: 290px;
  display: flex;
  flex-direction: column;
  .ColumnList-title {
    font-size: 18px;
    color: #333;
    margin-bottom: 10px;
  }
  .ColumnList-content,
  .ColumnList-content-null {
    width: 100%;
    .ColumnList-content-box {
      height: 86px;
      width: 100%;
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-bottom: 20px;
    
      .left {
        width: max-content;
        height: 100%;
        overflow: hidden;
        img {
          width: 100px;
          height: 100%;
          border-radius: 8px;
        }
      }

      .right {
        flex: 1;
        height: 100%;
        margin: 0 10px;
        overflow: hidden;
        .title {
          font-size: 15px;
          white-space: normal;
          display: -webkit-box;
          color: rgba(0, 0, 0, 0.9);
          line-height: 20px;
          overflow: hidden;
          text-overflow: ellipsis;
          -webkit-box-orient: vertical; 
          -webkit-line-clamp: 2; 
        }

        .content {
          display: flex;
          align-items: center;
          span:nth-child(1) {
            display: inline-block;
            font-size: 14px;
            color: #666;
          }

          span:nth-child(2) {
            margin-left: 5px;
            font-size: 12px;
            color: #ccc;
          }
        }
        .label {
          span {
            padding: 2px 4px;
            font-size: 11px;
            background: rgba(240, 93, 48, 0.1);
            color: rgba(240, 93, 48, 0.7);
            border-radius: 2px;
          }
        }
      }
    }
  }

  .ColumnList-content-box {
    .left {
      .null-div {
        width: 100px;
        height: 100%;
        background: rgba(0, 0, 0, 0.07);
        border-radius: 8px;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        img {
          width: 55px;
        }
        p {
          margin: 0;
          color: rgba(0, 0, 0, 0.6);
          font-weight: 400;
          text-align: center;
          font-size: 12px;
        }
      }
    }


  }
}
</style>
